<template>
  <view class="profile-page">
    <!-- 顶部导航栏 -->
    <view class="page-header">
      <view class="header-inner">
        <view class="back-btn" @click="handleBack">
          <FaIcon name="arrow-left" color="#1f2937" :size="36" />
        </view>
        <text class="header-title">个人资料</text>
        <button class="save-btn" @click="handleSave">
          <text class="save-text">保存</text>
        </button>
      </view>
    </view>

    <scroll-view scroll-y class="content-scroll">
      <!-- 头像部分 -->
      <view class="avatar-section">
        <view class="section-card">
          <view class="avatar-item" @click="handleChangeAvatar">
            <text class="item-label">头像</text>
            <view class="avatar-right">
              <image :src="profile.avatar" mode="aspectFill" class="avatar-img"></image>
              <FaIcon name="arrow-right" color="#9ca3af" :size="28" />
            </view>
          </view>
        </view>
      </view>

      <!-- 基本信息 -->
      <view class="info-section">
        <view class="section-title">
          <view class="title-bar"></view>
          <text class="title-text">基本信息</text>
        </view>
        
        <view class="section-card">
          <view class="info-item" @click="handleEditNickname">
            <text class="item-label">昵称</text>
            <view class="item-right">
              <text class="item-value">{{ profile.nickname }}</text>
              <FaIcon name="arrow-right" color="#9ca3af" :size="28" />
            </view>
          </view>
          
          <view class="info-item" @click="handleSelectGender">
            <text class="item-label">性别</text>
            <view class="item-right">
              <text class="item-value">{{ profile.gender }}</text>
              <FaIcon name="arrow-right" color="#9ca3af" :size="28" />
            </view>
          </view>
          
          <view class="info-item" @click="handleSelectBirthday">
            <text class="item-label">生日</text>
            <view class="item-right">
              <text class="item-value">{{ profile.birthday }}</text>
              <FaIcon name="arrow-right" color="#9ca3af" :size="28" />
            </view>
          </view>
        </view>
      </view>

      <!-- 联系方式 -->
      <view class="contact-section">
        <view class="section-title">
          <view class="title-bar"></view>
          <text class="title-text">联系方式</text>
        </view>
        
        <view class="section-card">
          <view class="info-item">
            <text class="item-label">手机号</text>
            <view class="item-right">
              <text class="item-value">{{ profile.phone }}</text>
              <text class="verified-badge">已认证</text>
            </view>
          </view>
          
          <view class="info-item" @click="handleEditEmail">
            <text class="item-label">邮箱</text>
            <view class="item-right">
              <text :class="['item-value', !profile.email && 'placeholder']">
                {{ profile.email || '未设置' }}
              </text>
              <FaIcon name="arrow-right" color="#9ca3af" :size="28" />
            </view>
          </view>
        </view>
      </view>

      <!-- 地区信息 -->
      <view class="address-section">
        <view class="section-title">
          <view class="title-bar"></view>
          <text class="title-text">地区信息</text>
        </view>
        
        <view class="section-card">
          <view class="info-item" @click="handleSelectRegion">
            <text class="item-label">所在地区</text>
            <view class="item-right">
              <text :class="['item-value', !profile.region && 'placeholder']">
                {{ profile.region || '未设置' }}
              </text>
              <FaIcon name="arrow-right" color="#9ca3af" :size="28" />
            </view>
          </view>
          
          <view class="info-item" @click="handleEditAddress">
            <text class="item-label">详细地址</text>
            <view class="item-right">
              <text :class="['item-value', !profile.address && 'placeholder']">
                {{ profile.address || '未设置' }}
              </text>
              <FaIcon name="arrow-right" color="#9ca3af" :size="28" />
            </view>
          </view>
        </view>
      </view>

      <!-- 个性签名 -->
      <view class="signature-section">
        <view class="section-title">
          <view class="title-bar"></view>
          <text class="title-text">个性签名</text>
        </view>
        
        <view class="section-card">
          <textarea 
            v-model="profile.signature" 
            class="signature-input"
            placeholder="说点什么吧..."
            :maxlength="50"
            :auto-height="true"
          ></textarea>
          <text class="char-count">{{ profile.signature?.length || 0 }}/50</text>
        </view>
      </view>

      <!-- 底部安全区 -->
      <view class="safe-bottom"></view>
    </scroll-view>

    <!-- 性别选择弹窗 -->
    <u-popup :show="showGenderPicker" mode="bottom" :round="20" @close="showGenderPicker = false">
      <view class="picker-popup">
        <view class="picker-header">
          <button class="picker-cancel" @click="showGenderPicker = false">取消</button>
          <text class="picker-title">选择性别</text>
          <button class="picker-confirm" @click="confirmGender">确定</button>
        </view>
        <picker-view :value="genderIndex" @change="onGenderChange" class="picker-view">
          <picker-view-column>
            <view v-for="(item, index) in genderOptions" :key="index" class="picker-item">
              {{ item }}
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </u-popup>

    <!-- 日期选择弹窗 -->
    <u-popup :show="showDatePicker" mode="bottom" :round="20" @close="showDatePicker = false">
      <view class="picker-popup">
        <view class="picker-header">
          <button class="picker-cancel" @click="showDatePicker = false">取消</button>
          <text class="picker-title">选择生日</text>
          <button class="picker-confirm" @click="confirmBirthday">确定</button>
        </view>
        <picker 
          mode="date" 
          :value="profile.birthday"
          @change="onBirthdayChange"
          class="date-picker"
        >
          <view class="picker-display">{{ profile.birthday || '请选择生日' }}</view>
        </picker>
      </view>
    </u-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import FaIcon from '@/components/common/FaIcon.vue'

// 用户资料
const profile = ref({
  avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200&h=200&fit=crop',
  nickname: '张三',
  gender: '男',
  birthday: '1990-01-01',
  phone: '138****8888',
  email: 'zhangsan@example.com',
  region: '山东省济宁市嘉祥县',
  address: '某某街道某某小区',
  signature: '做最好的自己'
})

// 性别选择
const showGenderPicker = ref(false)
const genderOptions = ['男', '女', '保密']
const genderIndex = ref([0])

// 日期选择
const showDatePicker = ref(false)

// 事件处理
const handleBack = () => {
  uni.navigateBack()
}

const handleSave = () => {
  // TODO: 保存个人资料
  uni.showToast({
    title: '保存成功',
    icon: 'success'
  })
}

const handleChangeAvatar = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      profile.value.avatar = res.tempFilePaths[0]
      // TODO: 上传头像
    }
  })
}

const handleEditNickname = () => {
  uni.showModal({
    title: '修改昵称',
    editable: true,
    placeholderText: '请输入昵称',
    content: profile.value.nickname,
    success: (res) => {
      if (res.confirm && res.content) {
        profile.value.nickname = res.content
      }
    }
  })
}

const handleSelectGender = () => {
  const index = genderOptions.indexOf(profile.value.gender)
  genderIndex.value = [index >= 0 ? index : 0]
  showGenderPicker.value = true
}

const onGenderChange = (e) => {
  genderIndex.value = e.detail.value
}

const confirmGender = () => {
  profile.value.gender = genderOptions[genderIndex.value[0]]
  showGenderPicker.value = false
}

const handleSelectBirthday = () => {
  showDatePicker.value = true
}

const onBirthdayChange = (e) => {
  profile.value.birthday = e.detail.value
}

const confirmBirthday = () => {
  showDatePicker.value = false
}

const handleEditEmail = () => {
  uni.showModal({
    title: '修改邮箱',
    editable: true,
    placeholderText: '请输入邮箱',
    content: profile.value.email || '',
    success: (res) => {
      if (res.confirm && res.content) {
        profile.value.email = res.content
      }
    }
  })
}

const handleSelectRegion = () => {
  uni.showToast({
    title: '地区选择功能开发中...',
    icon: 'none'
  })
}

const handleEditAddress = () => {
  uni.showModal({
    title: '修改地址',
    editable: true,
    placeholderText: '请输入详细地址',
    content: profile.value.address || '',
    success: (res) => {
      if (res.confirm && res.content) {
        profile.value.address = res.content
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.profile-page {
  min-height: 100vh;
  background-color: #f9fafb;
}

// 顶部导航栏
.page-header {
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 2rpx solid #f3f4f6;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 32rpx;
}

.back-btn {
  width: 64rpx;
  height: 64rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.back-btn:active {
  background-color: #f3f4f6;
}

.header-title {
  flex: 1;
  font-size: 32rpx;
  font-weight: bold;
  color: #1f2937;
  text-align: center;
}

.save-btn {
  padding: 12rpx 24rpx;
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(16, 185, 129, 0.3);
}

.save-text {
  font-size: 26rpx;
  font-weight: 500;
  color: #ffffff;
}

// 内容滚动区
.content-scroll {
  height: calc(100vh - 120rpx);
}

// 头像部分
.avatar-section {
  padding: 32rpx;
}

.section-card {
  background-color: #ffffff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  border: 2rpx solid #f3f4f6;
}

.avatar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.item-label {
  font-size: 30rpx;
  color: #1f2937;
}

.avatar-right {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.avatar-img {
  width: 128rpx;
  height: 128rpx;
  border-radius: 64rpx;
  border: 4rpx solid #f3f4f6;
}

// 通用部分
.info-section,
.contact-section,
.address-section,
.signature-section {
  padding: 0 32rpx 32rpx;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.title-bar {
  width: 8rpx;
  height: 40rpx;
  background-color: #10b981;
  border-radius: 4rpx;
}

.title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #1f2937;
}

.info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 0;
  border-bottom: 2rpx solid #f3f4f6;
  
  &:last-child {
    border-bottom: none;
  }
}

.item-right {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.item-value {
  font-size: 28rpx;
  color: #6b7280;
  
  &.placeholder {
    color: #d1d5db;
  }
}

.verified-badge {
  padding: 6rpx 12rpx;
  background-color: rgba(16, 185, 129, 0.1);
  border-radius: 8rpx;
  font-size: 22rpx;
  color: #10b981;
}

// 个性签名
.signature-input {
  width: 100%;
  min-height: 160rpx;
  padding: 0;
  font-size: 28rpx;
  color: #1f2937;
  line-height: 1.6;
  border: none;
  background-color: transparent;
}

.char-count {
  display: block;
  margin-top: 16rpx;
  font-size: 22rpx;
  color: #9ca3af;
  text-align: right;
}

// 选择器弹窗
.picker-popup {
  background-color: #ffffff;
  border-radius: 40rpx 40rpx 0 0;
  overflow: hidden;
}

.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
  border-bottom: 2rpx solid #f3f4f6;
}

.picker-cancel,
.picker-confirm {
  font-size: 28rpx;
  color: #10b981;
  background: none;
  border: none;
  padding: 0;
}

.picker-cancel {
  color: #9ca3af;
}

.picker-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1f2937;
}

.picker-view {
  height: 480rpx;
}

.picker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80rpx;
  font-size: 30rpx;
  color: #1f2937;
}

.date-picker {
  padding: 32rpx;
}

.picker-display {
  padding: 32rpx;
  text-align: center;
  font-size: 32rpx;
  color: #1f2937;
}

// 底部安全区
.safe-bottom {
  height: 160rpx;
}
</style>
